<template>
    <section class="coversation" v-show="control">
		<div class="pic-box" v-show="bigPic.show" @click="showPic('toClose')">
			<img :src="bigPic.src">
		</div>
		<section class="session-content" v-show="showSession">
			<section class="header">
				<div class="in-head">
					<span class="return" @click="goBack()">返回</span>{{friendInfo.nick?friendInfo.nick:friendId}}<span @click="goConfigure()" :class="selType=='GROUP'?'send group':'send'"></span>
				</div>
				<!-- <div v-if="selType!='C2C'&&hConfig" class="iframe-out">
					<iframe class="iframe" :src="hConfig.Url" :style="{height:hConfig.CustumHight/100 + 'rem'}"></iframe>
				</div> -->
				<!--群顶部三按钮，暂不启用
				<ul v-if="selType=='GROUP'" class="group-tab">
					<li @click="tabLink(1)"><span class="first"></span><span>约人砍价</span></li>
					<li @click="tabLink(2)"><span class="second"></span><span>点击砍价</span></li>
					<li @click="tabLink(3)"><span class="third"></span><span>玩家资料</span></li>
				</ul>
				-->
			</section>
			<section class="m-message" @click="moreCtrol()">
				<ul id="talk">
					<div class="load-more" v-show="!preSwitch&&loadIcon"><mt-spinner type="fading-circle"></mt-spinner></div>
					<li v-for="item in dataArr" v-if="item.transData[0].type!='tip'">
						<p v-if="item.time" class="time">{{transTime(item.time)}}</p>
						<div :class="item.fromAccount == loginInfo.identifier?'main self':'main'" >
							<div v-if="item.finish==0" class="status">
								<mt-spinner type="fading-circle" :size="24"></mt-spinner>
							</div>
							<div v-if="item.finish==2" class="status">
								<span class="error-icon">!</span>
							</div>
							<div v-if="item.fromAccount == loginInfo.identifier" class="avatar">
								<img :onerror="defaultImg" :src="loginInfo.headurl?loginInfo.headurl:defaultHead" @click="goConfigure('m')"/>
							</div>
							
							<div v-else class="avatar">
								<img :onerror="defaultImg" v-if="selType=='C2C'" :src="friendInfo.image?friendInfo.image:defaultHead" @click="goConfigure()"/>
								<img :onerror="defaultImg" v-else :src="item.head?item.head:defaultHead" @click="goConfigure('gp',item.fromAccount)"/>
							</div>
							<div class="text">
								<div class="contents" v-for="subItem in item.transData">
									<div v-if="subItem.type=='text'">{{subItem.text}}</div>
									<div v-if="subItem.type=='face'" class="face">
										<img :src="subItem.faceUrl">
									</div>
									<div v-if="subItem.type=='img'" class="small-img">
										<img :src="subItem.smallImage" @click.stop="showPic('toShow',subItem.bigImage)">
										<span v-if="item.finish==0" class="img-box"></span>
									</div>
									<div v-if="subItem.type=='custom'" class="custom">
										<span>{{subItem.desc}}</span>
										<div>
											<img :src="subItem.ext">
										</div>
										<a v-if="subItem.data" :href="subItem.data"></a>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li v-else>
						<div class="group-tip">
							{{item.transData[0].text}}
						</div>
					</li>
				</ul>
			</section>
			<section class="bottom-bar">
				<div class="send-box">
					<input id="inputText" placeholder="请输入内容..." v-model="myMsg">
					<div class="btn-group">
						<div class="send" @click="onSendMsg()">发送</div>
						<div class="icons">
							<span class="face" @click="moreCtrol('face')"></span>
							<span class="more" @click="moreCtrol('more')"></span>
						</div>
					</div>
				</div>
				<ul class="face-pack" v-if="emotions" v-show="showFace">
					<li v-for="item in emotions" @click="sendFace(item[0])"><img :src="item[1]"></li>
				</ul>
				<ul class="more-item" v-show="showMore">
					<li @click.stop="sendPic()">
						<span class="photo"></span>
						<span>图片</span>
						<input type="file" id="upd_pic" @change="sendPic($event,'')">
					</li>
					<li @click.stop="pageToggle()">
						<span class="custom"></span>
						<span>自定义信息</span>
					</li>
					<!--<li>
						<span class="history"></span>
						<span>历史记录</span>
					</li>-->
				</ul>

			</section>
		</section>
		<!--自定义-->
		<section class="custom-box" v-show="showCustom">
			<section class="header">
				<div class="in-head">
					编辑信息<span class="return right" @click="pageToggle('session')">关闭</span>
				</div>
			</section>
			<div class="custom-content">
				<form id="customIn">
				<div class="custom-in">
					<div class="theme"><input id="ecm_desc" placeholder="请输入主题 (最多50个汉字)"></div>
					<div class="adress"><input id="ecm_data" placeholder="请输入链接地址..."></div>
					<div id="customPhoto" class="photo">
						<input id="ecm_ext" type="file" @change="sendPic($event,'custom')">
					    <div v-if="localCustomPic&&!customPic" class="pic-load">
							<mt-spinner type="snake" :size="30" color="#888"></mt-spinner>
						</div>
					</div>
				</div>
				</form>
			</div>
			<div class="sub-btn">
				<button @click.stop="sendCustomMsg()">发布</button>
			</div>
		</section>
    </section>
</template>

<script>
import {checkStatus} from '../assets/js/login';
import Chat from '../assets/js/chat';
import Client from '../assets/js/common';
import convertMsgtoHtml from '../assets/js/convertMsg';
import defaultHead from '../assets/img/my@3x.png';
import {Toast,Spinner} from 'mint-ui';
import {axiosPost} from '../assets/api';
export default {
    data(){
        return{
			friendId:this.$route.query.id,
			selType:this.$route.query.selType,//会话类型 C2C或GROUP
			loginInfo:{},
			dataArr:[],
			groupListData: [],
			bigPic:{src:'',show:false},//大图
			emotions:null,//表情
			showMore:false,//展开更多
			showFace:false, //展开表情
			myClick:null, //当前展开的对象
			showSession:true,
			showCustom:false,
			defaultHead,
			historyKey:{},
			reqMsgCount:15,
			preSwitch:true,//翻页开关
			loadIcon:true, //加载图标
			transTime:Client.transTime,
			timeTemp:300, //历史记录每5分钟内的消息只展示一次时间
			listenTime:0,  //自己或好友监听回来消息时间分段
			friendInfo:{}, //好友基本缺省信息
			userLogin:Client.getStore('userLogin'),
			hConfig:null,//群组头部配置
			defaultImg:Client.defaultImg,
			myMsg:'',
			localCustomPic:null, //本地自定义上传的图片地址
			customPic:null, //已经成功上传到腾讯服务端的自定义图片地址
			imgCount:0, //聊天记录图片加载
			control:true, //权限判断控制
			memberImages:[],//群成员详细资料
			isIOS:Client.isIOS(),
        }
    },
    created(){
		if(!this.friendId||!this.selType){
			this.control = false;
			Toast('应用账号或聊天类型不存在');
			return;
		}else{
			if(this.selType!='C2C'&&this.selType!='GROUP'){
				this.control = false;
				Toast('聊天类型不可用');
				return;
			}
			checkStatus((loginInfo) => {
				this.loginInfo = loginInfo;
				this.loginInfo.onMsgNotify = null;
				if(this.selType == 'GROUP'){
					Chat.getMyGroup(loginInfo.identifier).then(resp=>{
						let isMyGroup = false;
						resp.forEach((group)=>{
							if(group.GroupId == this.friendId){
								isMyGroup = true;
							}
						});
						if(!isMyGroup){
							this.control = false;
							Toast('您没有该群的操作权限');
							return;
						}
						this.getLastGroupHistoryMsgs();
						//this.headConfig();
						this.handleListData(resp);
						Chat.getGroupMemberInfo(this.friendId).then(resp=>{
							if(resp&&resp.MemberList){
								//另外请求接口拿群员头像
								let groupMember = [];
								resp.MemberList.forEach((val,index)=>{
									groupMember.push(val.Member_Account);
								});
								Chat.getProfilePortrait(groupMember).then(resp=>{
									this.memberImages = resp;
								});
							}
						    }).catch(err=>{
							if(err.ErrorCode == 10007){
								this.control = false;
								Toast('您没有该群的操作权限');
							}
						});
				    });
				}else{
					//C2C
					this.getLastC2CHistoryMsgs();
					this.replaceInfo(this.friendId);
				}
			});
		}
	},

    components:{
       'mt-spinner':Spinner
    },

    computed:{

    },
    methods:{
		goBack() {
			this.loginInfo.onMsgNotify = null;
			this.$router.go(-1);
			
		},
		//配置资料跳转
		goConfigure(m,id){
			let postUrl,
				commonData = {
					"Platformkezel": "xx",
					"AppId": this.userLogin.AppId
				}
			if(this.selType == 'C2C'){
				postUrl = 'PersonalDataConfiguration/AddConfiguration?token=79864&appsecret=wwwww';
				commonData.PersonalData = {
					"Url":"",
					"Enabled":false
				}
			}else{
				postUrl = 'GroupDataConfiguration/AddConfiguration?token=79864&appsecret=wwwww';
				commonData.GroupData = {
					"Url":"",
					"Enabled":false
				}
			}
			let _this = this;
			axiosPost({
				data: commonData,
				url: postUrl,
				onSuccess (res) {
					console.log('获取配置跳转地址',res.data);
					if(res.data.ErrorCode != 0 ){
						_this.toDetails(m,id);
						return;
					}
					let datas = res.data.Result;
					if(datas.Url && datas.Url != ''){
						location.href = datas.Url;
					}else{
						_this.toDetails(m,id);
					}
				},
				onFailure (res) {
					_this.toDetails(m,id);
				}
			})
		},
		toDetails(mine,account) {
			    if(mine == 'm'){
					this.$router.push('/Setting');
					return;
				}
				if(this.selType == 'C2C'){
					this.$router.push({path: '/friendDetails', query: {id:this.friendId}});
				}else if(mine == 'gp' && typeof account !== 'undefined'){
					this.$router.push({path: '/friendDetails', query: {id:account}});
				}else if (Client.getStore("ClickCurrentGroupData") && this.selType == 'GROUP' && this.friendId) {
					let groupData = Client.getStore("ClickCurrentGroupData");
					let Id = groupData.GroupId;
					let RoleEn =groupData.RoleEn;
					switch (RoleEn) {
								case 'Owner':
									this.$router.push({path: '/ownerGroupDetails',query: {"groupId": Id}});
									break;
								case 'Member':
									if(groupData.TypeEn == 'Private'){
											this.$router.push({path: '/ownerGroupDetails',query: {"groupId": Id}});
									} else {
											this.$router.push({path: '/memberGroupDetails',query: {"groupId": Id}});
									}
									break;
								case 'Manager':
									this.$router.push({path: '/ownerGroupDetails',query: {"groupId": Id}});
									// this.$router.push({path: '/managerGroupDetails',query: {"groupId": Id}});
									break;
								default:
									break;
							}

				}	
		},
		// 初始化当前群组详情
		initGroup() {
			if(this.selType == 'GROUP' && this.groupListData.length > 0 && this.friendId){
					for(let i = 0; i < this.groupListData.length; i++) {
						if(this.groupListData[i].GroupId == this.friendId) {
							//保存群昵称
							this.friendInfo.nick = this.groupListData[i].Name;
							Client.setStore("ClickCurrentGroupData",this.groupListData[i]);
							//console.log("当前群组",this.currentGroup);
						}
					}
					return ;
				}
		},
		// 处理群组列表数据
		handleListData(GroupIdList) {
			
			for (let i = 0; i < GroupIdList.length; i++) {
			let groupId = GroupIdList[i].GroupId;
			//console.log("ggggg", GroupIdList[i]);
			let data = {
				'GId': groupId,
				'GroupId': webim.Tool.formatText2Html(groupId),
				'Name': webim.Tool.formatText2Html(GroupIdList[i].Name),
				'FaceUrl': GroupIdList[i].FaceUrl,
				'TypeEn': GroupIdList[i].Type,
				'Type': webim.Tool.groupTypeEn2Ch(GroupIdList[i].Type),
				'RoleEn': GroupIdList[i].SelfInfo.Role,
				'Role': webim.Tool.groupRoleEn2Ch(GroupIdList[i].SelfInfo.Role),
				'MsgFlagEn': GroupIdList[i].SelfInfo.MsgFlag,
				'MsgFlag': webim.Tool.groupMsgFlagEn2Ch(GroupIdList[i].SelfInfo.MsgFlag),
				'MemberNum': GroupIdList[i].MemberNum,
				'Notification': webim.Tool.formatText2Html(GroupIdList[i].Notification),
				'Introduction': webim.Tool.formatText2Html(GroupIdList[i].Introduction),
				'JoinTime': webim.Tool.formatTimeStamp(GroupIdList[i].SelfInfo.JoinTime),
				'ShutUpAllMember': GroupIdList[i].ShutUpAllMember,
				'SelfInfo':GroupIdList[i].SelfInfo,
				"ApplyJoinOption": GroupIdList[i].ApplyJoinOption
			}
			this.groupListData.push(data);
			}
			this.initGroup();
		},
		//获取最新的c2c历史消息,用于切换好友聊天，重新拉取好友的聊天消息
		getLastC2CHistoryMsgs(cbOk, cbError){
			let lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
			let msgKey = '';
			let options = {
				'Peer_Account': this.friendId, //好友帐号
				'MaxCnt': this.reqMsgCount, //拉取消息条数
				'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
				'MsgKey': msgKey
			};
			let selSess = null;
    		webim.MsgStore.delSessByTypeId(this.selType, this.selToID);
			webim.getC2CHistoryMsgs(
					options,
					resp => {
						let complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
						let retMsgCount = resp.MsgCount;//返回的消息条数，小于或等于请求的消息条数，小于的时候，说明没有历史消息可拉取了
						if (resp.MsgList.length == 0) {
							webim.Log.error("没有历史消息了:data=" + JSON.stringify(options));
							return;
						}
						//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
						this.historyKey = {
							'LastMsgTime': resp.LastMsgTime,
							'MsgKey': resp.MsgKey
						}
						//数据处理
						//console.log('test',convertMsgtoHtml(resp.MsgList[1]))
						let oldArr = resp.MsgList;
						//let newArr = [];
						oldArr.forEach((arr,index) => {
							let trans = convertMsgtoHtml(arr);
							oldArr[index].transData = trans;
							this.timeDistance(arr,index,oldArr.length);
						});
						this.dataArr = oldArr;
						console.log('this.dataArr',this.dataArr);
						//console.log('this.dataArr',oldArr);
						//设置消息已读
						let selSess = webim.MsgStore.sessByTypeId(this.selType, this.friendId);
						webim.setAutoRead(selSess, true, true);
						//this.$nextTick(()=>{
							this.scrollBottom();
						//});
						if (cbOk)
						   cbOk(resp.MsgList);
					},
					cbError
					);
		},
		//获取最新的群历史消息,用于切换群组聊天时，重新拉取群组的聊天消息
	    getLastGroupHistoryMsgs(cbOk) {
			if (selType == webim.SESSION_TYPE.C2C) {
				Toast('当前的聊天类型为好友聊天，不能进行拉取群历史消息操作');
				return;
			}
			let selType = this.selType;
			let selToID = this.friendId;
			let reqMsgCount = this.reqMsgCount; //每次请求的历史消息(c2c获取群)条数
			//let selSess = webim.MsgStore.sessByTypeId(selType, selToID);
			let recentSessMap = {}; //保存最近会话列表
			let getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息
			Chat.getGroupInfo(selToID, (resp) => {
				//拉取最新的群历史消息
				var options = {
					'GroupId': selToID,
					'ReqMsgSeq': resp.GroupInfo[0].NextMsgSeq - 1,
					'ReqMsgNumber': this.reqMsgCount
				};
				if (options.ReqMsgSeq == null || options.ReqMsgSeq == undefined || options.ReqMsgSeq <= 0) {
					webim.Log.warn("该群还没有历史消息:options=" + JSON.stringify(options));
					return;
				}
				//selSess = null;
				webim.MsgStore.delSessByTypeId(selType, selToID);
				recentSessMap[webim.SESSION_TYPE.GROUP + "_" + selToID] = {};

				recentSessMap[webim.SESSION_TYPE.GROUP + "_" + selToID].MsgGroupReadedSeq = resp.GroupInfo && resp.GroupInfo[0] && resp.GroupInfo[0].MsgSeq;
				webim.syncGroupMsgs(
					options,
					msgList => {
						if (msgList.length == 0) {
							webim.Log.warn("该群没有历史消息了:options=" + JSON.stringify(options));
							return;
						}
						let msgSeq = msgList[0].seq - 1;
						getPrePageGroupHistroyMsgInfoMap[selToID] = {
							"ReqMsgSeq":  msgSeq
						};
						console.log('群历史',msgList);
						//数据解析
						//替换群成员头像
						this.changeGroupMemberImg(msgList);
							//let newArr = [];
							msgList.forEach((arr,index) => {
								let trans = convertMsgtoHtml(arr);
								msgList[index].transData = trans;
								this.timeDistance(arr,index,msgList.length);
							});
						this.dataArr = msgList;
						this.historyKey = {"ReqMsgSeq":msgSeq};
						let selSess = webim.MsgStore.sessByTypeId(selType, selToID);
						webim.setAutoRead(selSess, true, true);
						this.scrollBottom();
						if (cbOk){
							cbOk(msgList);
						}
					},
					err => {
						if(err.ErrorCode !== 10007){
							Client.errInfo();
						}
					}
				);
			});
		},
		changeGroupMemberImg(oriArr,type){
			if(this.memberImages && typeof type == 'undefined'){
			    oriArr = oriArr.filter((item)=>{
					this.memberImages.forEach((val)=>{
						if(val.To_Account == item.fromAccount && val.Image){
							item.head = val.Image;
					    }
					});
				});
			}else if(type && type == 'listen'){
				//监听回来的群消息做成员头像替换
				this.memberImages.forEach((val)=>{
					if(val.To_Account == oriArr.fromAccount && val.Image){
						oriArr.head = val.Image;
					}
				});
			}
		},
		moreCtrol(type){
			if(typeof type == 'undefined' && ( this.showMore || this.showFace )){
				this.showMore = false;
				this.showFace = false;
				return
			}
			if(type == 'face'){
				if(this.myClick == 'face' && this.showFace){
					this.showFace = false;
				}else{
					this.showFace = true;
					this.myClick = 'face';
				}
				this.showMore = false;
			}else if(type == 'more'){
				if(this.myClick == 'more' && this.showMore){
					this.showMore = false;
				}else{
					this.showMore = true;
					this.myClick = 'more';
				}
				this.showFace = false;
			}
		},
		scrollBottom(){
			this.imgCount = 0;
			this.$nextTick(()=>{
				//imgLoading
				let imgs = document.querySelectorAll('.contents img'),
					imgArr = Array.from(imgs);
				if(imgArr.length > 0){
					this.imgArrLen = imgArr.length;
					imgArr.forEach((item)=>{
						let img = new Image()
						img.onload = ()=>{
							this.imgCount++;
							if(this.imgCount == this.imgArrLen){
								this.toBottom();
							}
						}
						img.src=item.getAttribute('src');
					});
				}else{
					this.toBottom();
				}
			});
		},
		toBottom(){
			let boxOut = document.querySelector(".m-message"),
			boxContent = document.querySelector("#talk");
			boxOut.scrollTop = boxContent.offsetHeight - boxOut.offsetHeight;
		},
		//*****以下为好友或群组通用收发消息方法*****
		//发送消息(文本或者表情)
		onSendMsg() {
			let selType = this.selType; //当前聊天类型
			let selToID = this.friendId; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
			//let selSess = webim.MsgStore.sessByTypeId(selType, selToID);//获取当前回话
			let friendHeadUrl = '';
			if (!selToID) {
				Toast("你还没有选中好友或者群组，暂不能聊天");
				return;
			}
			//获取消息内容
			//let msgtosend = document.querySelector('#inputText').value;
			let msgtosend = this.myMsg;
			let msgLen = webim.Tool.getStrBytes(msgtosend);
			
			if (msgtosend.length < 1) {
				Toast("发送的消息不能为空");
				return;
			}
			if(!msgtosend.trim()){
				Toast("发送的消息不能全为空格");
				this.myMsg = '';
				return;
			}
			let maxLen, errInfo;
			if (selType == webim.SESSION_TYPE.C2C) {
				maxLen = webim.MSG_MAX_LENGTH.C2C;
				errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
			} else {
				maxLen = webim.MSG_MAX_LENGTH.GROUP;
				errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
			}
			if (msgLen > maxLen) {
				Toast(errInfo);
				return;
			}
			/*if (!this.selSess) {
				let selSess = new webim.Session(selType, selToID, selToID, friendHeadUrl, Math.round(new Date().getTime() / 1000));
			}*/
			//console.log('this.myMsg',this.myMsg);
			let selSess = new webim.Session(selType, selToID,selToID, friendHeadUrl, Math.round(new Date().getTime() / 1000)),
			    isSend = true,//是否为自己发送
			    seq = -1,//消息序列，-1表示sdk自动生成，用于去重
			    random = Math.round(Math.random() * 4294967296),//消息随机数，用于去重
			    msgTime = Math.round(new Date().getTime() / 1000),//消息时间戳
			    subType;//消息子类型
			if (selType == webim.SESSION_TYPE.C2C) {
				subType = webim.C2C_MSG_SUB_TYPE.COMMON;
			}else{
				//webim.GROUP_MSG_SUB_TYPE.COMMON-普通消息,
				//webim.GROUP_MSG_SUB_TYPE.LOVEMSG-点赞消息，优先级最低
				//webim.GROUP_MSG_SUB_TYPE.TIP-提示消息(不支持发送，用于区分群消息子类型)，
				//webim.GROUP_MSG_SUB_TYPE.REDPACKET-红包消息，优先级最高
				subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
			}
			//console.log('selSess',selSess);
			let msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
			let text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
			//模拟数据数组
			let modelArr = [];
			//解析文本和表情
			let expr = /\[[^[\]]{1,3}\]/mg;
			let emotions = msgtosend.match(expr);
			let textObjs = { type: 'text' },
			    faceObjs = { type: 'face' };
			if (!emotions || emotions.length < 1) {
				text_obj = new webim.Msg.Elem.Text(msgtosend);
				textObjs.text = msgtosend;
				modelArr.push(textObjs);
				msg.addText(text_obj);
			} else {
				for (let i = 0; i < emotions.length; i++) {
					let newtextObjs = { type: 'text' },
			            newfaceObjs = { type: 'face' }; 
					tmsg = msgtosend.substring(0, msgtosend.indexOf(emotions[i]));
					if (tmsg) {
						text_obj = new webim.Msg.Elem.Text(tmsg);
						newtextObjs.text = tmsg;
						modelArr.push(newtextObjs);
						msg.addText(text_obj);
					}
					emotionIndex = webim.EmotionDataIndexs[emotions[i]];
					emotion = webim.Emotions[emotionIndex];
					if (emotion) {
						newfaceObjs.faceUrl = emotion[1];
						modelArr.push(newfaceObjs);
						face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
						msg.addFace(face_obj);
					} else {
						//非系统提供的默认表情
						text_obj = new webim.Msg.Elem.Text(emotions[i]);
						msg.addText(text_obj);
						let errorFace = Object.assign({},newtextObjs)
						errorFace.text = emotions[i];
						modelArr.push(errorFace);
					}
					restMsgIndex = msgtosend.indexOf(emotions[i]) + emotions[i].length;
					msgtosend = msgtosend.substring(restMsgIndex);
				}
				if (msgtosend) {
					let finalText = Object.assign({},textObjs);
					finalText.text = msgtosend;
					modelArr.push(finalText);
					text_obj = new webim.Msg.Elem.Text(msgtosend);
					msg.addText(text_obj);
				}
			}
			//console.log('模拟数据',modelArr);
			let modelTime = Client.timeStamp();
			//finish 发送状态 0发送中 1成功 2失败

			let modelFinal = {finish:0,createTime:modelTime,time:modelTime,fromAccount:this.loginInfo.identifier,transData:modelArr};
			this.listenDistence(modelFinal);
			this.dataArr.push(modelFinal);
			this.myMsg = '';
			this.scrollBottom();
			//return;
			webim.sendMsg(msg, resp => {
				this.checkLocalMsg(this.dataArr,modelTime,1);
			}, err => {
				this.checkLocalMsg(this.dataArr,modelTime,2);
				Client.errInfo();
				//Toast(err.ErrorInfo);
				console.log('err',err)
			});
		},
		//按时间戳和用户ID去更改本地消息的发送状态
		checkLocalMsg(arr,time,status){
			arr.forEach((val,i)=>{
				if(val.createTime && val.createTime == time && val.fromAccount == this.loginInfo.identifier){
					this.dataArr[i].finish = status;
				}
			})
		},
		showPic(type,src){
			if(type=='toClose'){
				this.bigPic.src = '0';
				this.bigPic.show = false;
			}else{
				this.bigPic.src = src;
				this.bigPic.show = true;
			}
			
		},
		checkIME(){
			let IME = document.querySelector('#inputText');
			IME.onfocus = ()=>{
				document.body.style.WebkitTransform = "translateY(" + -42 + "px)";
			}
			IME.onblur = ()=>{
				setTimeout(()=>{
					document.body.removeAttribute('style');
				},200);
			}
		},
		sendFace(text){
			this.myMsg += text;
		},
		//上传并发送图片
		sendPic(event,aimType){
			//aimType 目标类型 发送好友图片 还是 自定义图片
			if(typeof event =='undefined'){
				return;
			}
			//console.log('上传');
			if (!window.File || !window.FileList || !window.FileReader) {
				Toast("您的浏览器不支持File Api");
				return;
			}
			let uploadFiles = event.srcElement;
			let file = uploadFiles.files[0];
			let fileSize = file.size;
			//先检查图片类型和大小
			if (!this.checkPic(uploadFiles, fileSize)) {
				return;
			}

			//预览图片
			let reader = new FileReader();
			let picTime = Client.timeStamp();
			reader.onload = (file => {
				return e => {
					let imgUrl = e.srcElement.result;
					if(aimType !== 'custom'){
						let localImg = {finish:0,fromAccount:this.loginInfo.identifier,time:picTime,createTime:picTime};
						let transImg = {type:'img',smallImage:imgUrl,bigImage:imgUrl};
						localImg.transData = [transImg];
						this.dataArr.push(localImg);
						setTimeout(()=>{
							this.scrollBottom();
						},300)
					}else{
						this.localCustomPic = imgUrl;
						this.customPic = null;
						document.querySelector("#customPhoto").style.background = "url(" + imgUrl + ") no-repeat center";
					}
				};
			})(file);
			reader.readAsDataURL(file);
			uploadFiles.value = '';

				let businessType;//业务类型，1-发群图片，2-向好友发图片
				if (this.selType == webim.SESSION_TYPE.C2C) {//向好友发图片
					businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
				} else if (this.selType == webim.SESSION_TYPE.GROUP) {//发群图片
					businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.GROUP_MSG;
				}
				//封装上传图片请求
				let opt = {
					'file': file, //图片对象
					'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
					//'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
					'From_Account': this.loginInfo.identifier, //发送者帐号
					'To_Account': this.friendId, //接收者
					'businessType': businessType//业务类型
				};
				//上传图片
				webim.uploadPic(opt,
						resp => {
							console.log('图片回调信息',resp);
							if(aimType !== 'custom'){
								//直接发送图片给好友
								this.postPic(resp,file.name,picTime);
							}else{
								//处理自定义消息图片
								let picUrl = resp.URL_INFO[0].DownUrl;
								this.customPic = picUrl;
							}
						},
						err => {
							this.checkLocalMsg(this.dataArr,picTime,2);
							Client.errInfo();
						}
				);
		},
		//上传图片回调
		onProgressCallBack(loadedSize, totalSize){
			console.log('loadedSize',loadedSize);
			console.log('totalSize',totalSize);
		},
		//检查文件类型和大小
        checkPic(obj, fileSize) {
			let picExts = 'jpg|jpeg|png|bmp|gif|webp';
			let photoExt = obj.value.substr(obj.value.lastIndexOf(".") + 1).toLowerCase();//获得文件后缀名
			let pos = picExts.indexOf(photoExt);
			if (pos < 0) {
				Toast("您选中的文件不是图片，请重新选择");
				return false;
			}
			fileSize = Math.round(fileSize / 1024 * 100) / 100; //单位为KB
			if (fileSize > 30 * 1024) {
				Toast("您选择的图片大小超过限制(最大为30M)，请重新选择");
				return false;
			}
			return true;
		},
		//上传成功后发送图片消息
		postPic(images,imgName,times) {
			if (!this.friendId) {
				Toast("您还没有好友，暂不能聊天");
				return;
			}

			if (!this.selSess) {
				this.selSess = new webim.Session(this.selType, this.friendId, this.friendId, '', Math.round(new Date().getTime() / 1000));
			}
			let msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
			let images_obj = new webim.Msg.Elem.Images(images.File_UUID);
			for (let i in images.URL_INFO) {
				let img = images.URL_INFO[i];
				let newImg;
				let type;
				switch (img.PIC_TYPE) {
					case 1://原图
						type = 1;//原图
						break;
					case 2://小图（缩略图）
						type = 3;//小图
						break;
					case 4://大图
						type = 2;//大图
						break;
				}
				newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
				images_obj.addImage(newImg);
			}
			msg.addImage(images_obj);
			//if(imgName){
			//    let data=imgName;//通过自定义消息中的data字段保存图片名称
			//    let custom_obj = new webim.Msg.Elem.Custom(data, '', '');
			//    msg.addCustom(custom_obj);
			//}
			//调用发送图片消息接口
			webim.sendMsg(msg, resp => {
				/*if (this.selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
					console.log('图片最终发送成功',msg);
					//解析回传的图片信息
					let translatePic = convertMsgtoHtml(msg);
					msg.transData = translatePic;
					this.dataArr.push(msg);
					document.getElementById('upd_pic').value = '';
					this.scrollBottom();
				}*/
				this.checkLocalMsg(this.dataArr,times,1);
			}, err => {
				this.checkLocalMsg(this.dataArr,times,2);
				Client.errInfo();
			});
		},
		//处理发送自定义消息
		sendCustomMsg(){
			let selType = this.selType;
			let selToID = this.friendId;
			if (!selToID) {
				Toast('您还没有好友或群组，暂不能聊天');
				return;
			}
			let data = document.querySelector("#ecm_data").value,
				desc = document.querySelector("#ecm_desc").value;
			if(desc.length>0&&!desc.trim()){
				Toast("输入的主题不能全为空");
				return;
			}else if(desc.length>50){
				Toast("输入的主题不能超过50个汉字");
				return;
			}
			if(data.length > 0){
				if(!data.trim()){
					Toast("输入的链接地址不能全为空");
					return;
				}
				let checkUrl = this.checkURL(data);
				if(!checkUrl){
					Toast("输入的链接地址格式不正确");
					return;
				}else if(!/http(s)?:\/\//.test(data)){
					data = 'http://' + data;
				}
			}
			let msgLen = webim.Tool.getStrBytes(data);
			let maxLen, errInfo;
			if (selType == webim.SESSION_TYPE.C2C) {
				maxLen = webim.MSG_MAX_LENGTH.C2C;
				errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
			} else {
				maxLen = webim.MSG_MAX_LENGTH.GROUP;
				errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
			}
			if (msgLen > maxLen) {
				Toast(errInfo);
				return;
			}
            if(!this.customPic){
				Toast('您还未上传图片');
				return;
			}
			/*if (!selSess) {
				selSess = new webim.Session(selType, selToID, selToID, '', Math.round(new Date().getTime() / 1000));
			}*/
			//模拟自定义数据
			let cusTime = Client.timeStamp();
			let transCustom = {finish:0,fromAccount:this.loginInfo.identifier,createTime:cusTime,time:cusTime}
			let customObjs = {data:data,desc:desc,ext:this.localCustomPic,type:'custom'};
			transCustom.transData = [customObjs];
			this.dataArr.push(transCustom);
			this.pageToggle('session');
			this.scrollBottom();

			let selSess = new webim.Session(selType, selToID, selToID, '', Math.round(new Date().getTime() / 1000));

			let msg = new webim.Msg(selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
			
			let custom_obj = new webim.Msg.Elem.Custom(data, desc, this.customPic);
			
			msg.addCustom(custom_obj);
			
			//调用发送消息接口
			msg.sending = 1;
			webim.sendMsg(msg, resp => {
				this.checkLocalMsg(this.dataArr,cusTime,1);
			}, err => {
				this.checkLocalMsg(this.dataArr,cusTime,2);
				Client.errInfo();
			});
			this.localCustomPic = null;
			this.customPic = null;
		},
		checkURL(str){
			return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);
		},
		//页面切换
		pageToggle(type){
			this.showSession = !this.showSession;
			this.showCustom = !this.showCustom;
			if(typeof type !== 'undefined'){
				document.querySelector("#customIn").reset();
				document.querySelector("#customPhoto").removeAttribute("style");
			}
		},
		scrollPage(){
			let msgTag = document.querySelector('.m-message');
			msgTag.onscroll = () => {
                if (msgTag.scrollTop == 0 && this.preSwitch) {
					this.preSwitch = false;
					if (this.selType == 'C2C') {
						this.getPrePageC2CHistory();
					} else {
						this.getPrePageGroupHistory();
					}
                }
            }
		},
		//拉取上一页C2C历史记录
		getPrePageC2CHistory(){
			if(!this.historyKey){
				//alert('获取下一次拉取的c2c消息时间和消息Key为空');
        		return;
			}
			let options = {
				'Peer_Account': this.friendId, //好友帐号
				'MaxCnt': this.reqMsgCount, //拉取消息条数
				'LastMsgTime': this.historyKey.LastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
				'MsgKey': this.historyKey.MsgKey
			};
			webim.getC2CHistoryMsgs(
				options,
				resp => {
					var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
					if (resp.MsgList.length == 0) {
						this.loadIcon = false;
						webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
						return;
					}
					//保留服务器返回的最近消息时间和消息Key
					this.historyKey = {
						'LastMsgTime': resp.LastMsgTime,
						'MsgKey': resp.MsgKey
					};
					let prePageArr = resp.MsgList;
					this.addHistory(prePageArr);
				}
			);
		},
		//向上翻页，获取更早的群历史消息
	    getPrePageGroupHistory(cbOk) {
			if (this.historyKey) {
				if (this.historyKey.ReqMsgSeq <= 0) {
					this.loadIcon = false;
					webim.Log.warn('该群没有历史消息可拉取了');
					return;
				}
			} else {
				webim.Log.error('获取下一次拉取的群消息seq为空');
				return;
			}
			let options = {
				'GroupId': this.friendId,
				'ReqMsgSeq': this.historyKey.ReqMsgSeq,
				'ReqMsgNumber': this.reqMsgCount
			};
			webim.syncGroupMsgs(
				options,
				msgList => {
					if (msgList.length == 0) {
						this.loadIcon = false;
						webim.Log.warn("该群没有历史消息了:options=" + JSON.stringify(options));
						return;
					}
					let msgSeq = msgList[0].seq - 1;
					this.historyKey.ReqMsgSeq = msgSeq;
					this.changeGroupMemberImg(msgList);
					this.addHistory(msgList);
				},
				err => {
					//alert(err.ErrorInfo);
					console.log('err.ErrorInfo',err.ErrorInfo);
				}
			);
		},
		//addHistory
		addHistory(prePageArr){
			let talkBoxH = document.querySelector('#talk').offsetHeight;
			prePageArr.forEach((val,i)=>{
				val.transData = convertMsgtoHtml(val);
				this.timeDistance(val,i,prePageArr.length);
			});
			this.dataArr = [...prePageArr,...this.dataArr];
			setTimeout(()=>{
				let afterH = document.querySelector('#talk').offsetHeight;
				document.querySelector('.m-message').scrollTop = afterH - talkBoxH - 43;
				this.preSwitch = true;
			},100);
		},
		//遍历历史消息时对时间分段,间隔5分钟只展示一次
		timeDistance(val,index,len){
			if(this.timeTemp == 300){
				this.timeTemp += val.time;
			}else{
				if(val.time < this.timeTemp){
					val.time = false;
				}else{
					this.timeTemp += val.time;
				}
				//每次下拉拉取记录时重新记录
				if(index == len - 1){
					this.timeTemp = 300;
				}
			}
		},
		//比对消息间隔,每2分钟内连续发送不展示时间
		listenDistence(val){
			if(this.listenTime == 0){
				this.listenTime = val.time;
			}else{
				if(val.time - this.listenTime < 120){
					this.listenTime = val.time;
					val.time = false;
				}else{
					this.listenTime = val.time;
				}
			}
		},
		//好友缺省资料替换
		replaceInfo(id){
			let infoObj = {},
				infoMap = Client.getStore("infoMap");
            if(infoMap){
				infoMap.forEach((item,index) => {
					if(item.SnsProfileItem){
						item.SnsProfileItem.forEach((val,i)=>{
							if(item.Info_Account == id){
								//拿详细资料,跳转好友详情用到
								//infoObj.Info_Account = id;
								//infoObj[val.Tag] = val.Value;
								if(val.Tag == 'Tag_Profile_IM_Nick'){
									infoObj.nick = val.Value;
								}
								if(val.Tag == 'Tag_Profile_IM_Image'){
									infoObj.image = val.Value;
								}			
							}
						});
					}
				});
			this.friendInfo = infoObj;
			}
		},
		//获取群组头部配置
		headConfig(){
			let headUrl = 'CustomerAPPConfiguration/GetLocationIdConfiguration?token=xxxxx&appsecret=XXXXX',
			    datas = {
					"AppId": this.userLogin.AppId,
					"ConfigurablePageLocationId":10000
				};
				console.log(this.userLogin.AppId);
			let _this = this;
			axiosPost({
				data: datas,
				url: headUrl,
				onSuccess (res) {
					_this.hConfig = res.data.Result;
				},
				onFailure (res) {
					
				}
			})
		}/*,
		tabLink(type){
			if(type == 1){
				document.location.href = 'http://www.baidu.com';
			}else if(type == 2){
				document.location.href = 'http://vip.com';
			}else if(type == 3){
				document.location.href = 'http://www.jd.com';
			}
		}*/
	},
	mounted(){
		this.emotions = webim.Emotions;
		let contentH = document.querySelector(".session-content"),
		    customH = document.querySelector(".custom-box"),
			winH = window.innerHeight;
		contentH.style.height = customH.style.minHeight = window.innerHeight + 'px';
		this.scrollPage();
		if(this.isIOS){
			this.checkIME();
		}
    },
	watch:{
        'loginInfo.onMsgNotify':function(val){  
			  if(val == null || val == {}){
				  return
			  }else{
				  //具体消息对象
				  let sessMap = val.sess._impl;
				  if(val.fromAccount !== this.loginInfo.identifier){
					  if((sessMap.type == 'C2C' || sessMap.type == 'GROUP') && sessMap.id !== this.friendId){
						  return;
					  }
					  if(sessMap.type == 'GROUP'){
						  this.changeGroupMemberImg(val,'listen');
					  }
					  let listenNew = convertMsgtoHtml(val);
					  val.transData = listenNew;
					  this.listenDistence(val);
					  this.dataArr.push(val);
					  this.scrollBottom(); 
				  }
			  }
		}
	}
}
</script>
<style lang="less" scoped> 
.placeholder(@rules) {
    &::-webkit-input-placeholder {
        @rules();
    }
}
.coversation{
	-webkit-overflow-scrolling: touch; 
	.pic-box{
			width:100%;
			height:100%;
			position:fixed;
			z-index:99999;
			background:rgba(0,0,0,.8);
			display:-webkit-box;
			-webkit-box-orient: vertical;
            -webkit-box-align: center;
            -webkit-box-pack: center;
			img{
				max-width:100%;
				max-height:100%;
			}
	}
	.session-content{
		display: flex;
		flex-direction: column;
	}
	.header {
      border-bottom: 1px solid #f4f4f4;
	  background-color: #fff !important;
	  overflow: hidden;
	  .in-head{
		width:100%;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
        align-items: center;
		height: 0.5rem;
		position: relative;
		font-size: 0.16rem;
		.return {
			color: #4A4A4A;
			font-size: 0.16rem;
			top:50%;
			margin-top:-.08rem;
			position: absolute;
			left: 0.15rem;
			&.right{
				left: auto;
				right: .15rem;
			}
		}
		.send {
			width:.2rem;
			height:.2rem;
			background: url('../assets/img/icon_friend@3x.png') no-repeat center;
			background-size: contain !important;
			position: absolute;
			top:50%;
			margin-top:-.1rem;
			right: 0.15rem;
			&.group{
				background: url('../assets/img/icon_group@3x.png') no-repeat center;
			}
		}
	  }
	  .iframe-out{
		  .iframe{
			width:100%;
			border:0;
		  }
	  }
	  .group-tab{
		  display: flex;
		  padding:.06rem 0;
		  font-size: .14rem;
		  color:#818181;
		  border-top:.01rem solid #f1f1f1;
		  //justify-content: center;
		  li{
			  flex:1;
			  display: flex;
			  justify-content: center;
			  padding:.1rem 0;
			  align-items: center;
			  &:nth-child(-n+2){
				  border-right:.01rem solid #E1E1E1;
			  }
			  span{
				  &:first-child{
					display: block;
					width:.18rem;
					height:.18rem;
					margin-right:.05rem;
					background: url('../assets/img/icon_group@3x.png') no-repeat center;
					background-size: contain !important;
					&.first{
						background: url('../assets/img/icon_invite@3x.png') no-repeat center;
					}
					&.second{
						background: url('../assets/img/icon_discount@3x.png') no-repeat center;
					}
					&.third{
						background: url('../assets/img/icon_data05@3x.png') no-repeat center;
					}
				  }
				  /*&:last-child{
					  height: 0.18rem;
					  line-height: .18rem;
				  }*/
			  }
			  
		  }
	  }
    }
	.m-message {
		padding: 0 .15rem;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		flex:1;
		.load-more{
			display: flex;
			padding:.1rem 0 .05rem;
			justify-content: center;
		}
		ul{
			overflow: hidden;
		}
        li {
			margin-bottom: .15rem;
			.group-tip{
				padding:.1rem 0;
				text-align: center;
				font-size: .12rem;
				line-height:.16rem;
				color:#B1B1B1;
			}
        }
        .time {
            text-align: center;
			color:#B1B1B1;
			font-size: .12rem;
			padding:.1rem 0;
        }
        .main{
			display: flex;
			.avatar {
				margin: 0 .1rem 0 0;
				border-radius: .2rem;
				width:.4rem;
				height:.4rem;
				overflow: hidden;
				img{
					display: block;
					width:100%;
					height:100%;
				}
			}
			.text {
				display: flex; 
				flex-wrap: wrap;
				align-items: center;
				padding: .1rem .15rem;
				line-height: .2rem;
				font-size: .14rem;
				max-width: 2.64rem;
				text-align: left;
				word-break: break-all;
				background-color: #fafafa;
				border-radius: 0 .05rem 0.05rem;
				color:#4A4A4A;
				.contents{
					text-align: justify;
					.face{
						width:.16rem;
						height:.16rem;
						img{
							width:100%;
						}
					}
					.small-img{
						max-width:2.18rem;
						img{
							width:100%;
						}
					}
					.custom{
						overflow: hidden;
						position: relative;
						span{
							font-size:.14rem;
							color:#4F4F4F;
							margin-bottom:.06rem;
							display:block;
						}
						div{
							max-width:1.67rem;
							img{
								width:100%;
							}
						}
						a{
							position: absolute;
							width:100%;
							height:100%;
							top:0;
							left:0;
						}	
					}
				}
			}
		}
        
        .self {
			width:100%;
			justify-content:flex-end;
			.status{
				display: flex;
				align-items:center;
				padding-right:.1rem;
				.error-icon{
					width: .24rem;
					height: .24rem;
					border-radius: .12rem;
					display:block;
					background: rgb(230, 4, 4);
					color:#fff;
					text-align: center;
					line-height: .24rem;
					font-size:.16rem;
			    }
			}
            .avatar {
				margin: 0 0 0 .1rem;
				order: 1;
            }
            .text {
				background-color: #888;
				color: #fff;
				border-radius: .05rem 0 0.05rem 0.05rem;
				.contents{
					.small-img{
						position: relative;
						.img-box{
							display: block;
							width:100%;
							height:100%;
							position: absolute;
							top: 0;
							left: 0;
							background: rgba(0,0,0,.6);
						}
					}
					.custom{
						color:#fff !important;
						span{
							color:#fff;
						}
						div{
								
						}
					}
				}
            }
        }
	}
	.bottom-bar{
		width:100%;
		background:#fff;
		border-top:.01rem solid #E5E5E5;
		box-shadow: 0 0 .05rem .01rem #E5E5E5;
		.send-box{	
			display: -webkit-box;
			padding:.14rem .15rem;
			overflow: hidden;
			position: relative;
			input{
				-webkit-box-flex:1.0;
				height: 0.22rem;
				line-height:.22rem;
				border: 0;
				color:#888;
				font-size: .16rem;
				display: block;
				.placeholder({
					color: #888;
				});
			}
			.btn-group{
				display: flex;
				.send{
					height:.22rem;
					line-height:.22rem;
					text-align: center;
					padding:0 .15rem;
					color:#4F4F4F;
					font-size: .16rem;
					border-right:.01rem solid #E1E1E1;
				}
				.icons{
					span{
						display: block;
					}
					.face,.more{
						width:.2rem;
						height:.2rem;
						margin-left:.15rem;
						float:left;
						background-size: contain !important;
					}
					.face{
						background: url('../assets/img/icon_emoticon@3x.png') no-repeat;
					}
					.more{
						background: url('../assets/img/icon_more@3x.png') no-repeat;
				    }
				}
				
			}
		}
		.face-pack{
			display: flex;
			flex-wrap: wrap;
			border-top:.01rem solid #E5E5E5;
			padding:.15rem .15rem .1rem;
			li{
				width:.24rem;
				height:.24rem;
				margin:0 .04rem .04rem 0
			}
		}
		.more-item{
			border-top:.01rem solid #E5E5E5;
			padding:.15rem 0 .17rem;
			display: flex;
			justify-content:center;
			li{
				/*&:nth-child(-n+2){
					margin-right:.55rem;
				}*/
				&:first-child{
					position: relative;
					margin-right:.8rem;
					input{
						width:100%;
						height:100%;
						position: absolute;
						opacity: 0;
						top:0;
						left:0;
					}
				}
				span:first-child{
					width:.55rem;
					height: .55rem;
					display: block;
					border:.01rem solid #F5F5F5;
					border-radius: .08rem;
					background-size: .25rem auto;
				}
				span:nth-child(2){
					display: block;
					text-align: center;
					color:#9A9A9A;
					font-size:.12rem;
					padding-top:.08rem;
				}
				.photo{
					background: url('../assets/img/icon_picture@3x.png') no-repeat center;
				}
				.custom{
					background: url('../assets/img/icon_custom@3x.png') no-repeat center;
				}
				.history{
					background: url('../assets/img/icon_messare@3x.png') no-repeat center;
				}
			}
		}
	}

	.custom-box{
		display: flex;
		flex-direction: column;
		.custom-content{
			flex:1;
			margin-top: .1rem;
			.custom-in{
				background: #fff;
				padding:.15rem .15rem 0;
				overflow:hidden;
				input{
					border:.01rem solid #D8D8D8;
					border-radius:.05rem;
					padding:.08rem .15rem;
					color:#B1B1B1;
					font-size:.14rem;
					flex:1;
					-webkit-appearance: none;
					.placeholder({
						color: #B1B1B1;
					});
				}
				.theme{
					display: flex;
					margin-bottom:.15rem;
				}
				.adress{
					display: flex;
					& input{
						padding:.1rem .16rem;
					}
				}
				.photo{
					width:2.35rem;
					height:2.35rem;
					background: url('../assets/img/icon_add@2x.png') no-repeat center;
					background-size: contain !important;
					margin:.25rem auto .61rem;
					overflow: hidden;
					position: relative;
					input{
						width:100%;
						height:100%;
						opacity: 0;
					}
					.pic-load{
						width: 100%;
						height:100%;
						position: absolute;
						top:0;
						left: 0;
						background: rgba(255,255,255,.4);
						display: flex;
						align-items:center;
						justify-content:center;
					}
				}
			}
		}
		.sub-btn{
			padding:0 .15rem .28rem;
			button{
				display: block;
				width:100%;
				height: 0.4rem;
				border:0;
				font-size: .16rem;
				color:#fff;
				background: #E2AA56;
				border-radius: .05rem;
			}
		}
	}
}
</style>